<!DOCTYPE html>
<html>
<head lang="en">
    <title>首页</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <script src="/tab/tab.js"></script>
    <script type="text/css">
        *{ margin: 0; padding: 0;}
        ul,li{list-style: none;}
        body{ background: #f1f1f1;}
        /*选项卡插件样式*/
        .tab{ width: 300px;}
        .tabnav{ float: left; border-bottom:1px solid #d2d2d2; width:300px; height:38px; overflow: hidden; background: #fff; color: #333;}
        .tabnav li{ float: left; width:100px; height:38px; line-height:38px; text-align: center; font-size: 16px; cursor: pointer;}
        .tabcontent{float: left; width: 300px; height:100px; background: #fff;}
        .tabcontent .tab_con{ width:260px; height:300px; display:none;}
        .cuttor{ background:#6eb92b; color: #fff;}
        .tabcontent>div{ display: none;}
    </script>
    <script>
        $(function () {

            $.get("/goods/commends" , {state:true} , function (data){
            console.log(data);
                $("#goodsCommends").renderValues({list:data} , {
                    price:function (ele, val) {
                        ele.innerHTML = "积分: " + val;
                    },
                    inven:function (ele, val) {
                        ele.innerHTML = "库存: " + val;
                    }
                });
                $(".carousel-item:first").addClass("active");
            });


            var tabs = [];
            var tab;

            $.get("/goods/types" , {state : 1} , function (data) {
                console.log(data);
                $.each(data, function (index, ele) {
                    console.log(ele);
                    createTab(index, ele).appendTo("#pills-tab");
                    $.get("/goods", {pageSize: 2 , type:ele.id}, function (data) {
                        console.log(data);
                        $(data).appendTo("#pills-tabContent");
                        //保存选择卡信息
                        tabs[index] = {currentPage: 1, pages: $(data).data("pages"), placeId: ele.id}
                    }, "html")
                });
                $("li.nav-item:first").addClass("cuttor");
            })

        });

        //创建一个选项卡的方法
        function createTab(index, obj) {
            /*<li class="nav-item" data-index="xx">
            <a data-tid="xx" class="nav-link" data-toggle="pill" href="#pills-xx">oo</a>
                    </li>*/
            var a = $("<a class='nav-link' data-toggle='pill'></a>").attr("data-tid", obj.id)
                .attr("href", "#pills-" + obj.id).html(obj.name);
            return $("<li class='nav-item'></li>").attr("data-index", index).append(a);
        }

        function showComments() {
            var Mar = document.getElementsByClassName("Marquee")[0];
            var child_div = Mar.getElementsByTagName("div");
            var picH = 50;//移动高度
            var scrollstep = 3;//移动步幅,越大越快
            var scrolltime = 20;//移动频度(毫秒)越大越慢
            var stoptime = 3000;//间断时间(毫秒)
            var tmpH = 0;
            Mar.innerHTML += Mar.innerHTML;

            function start() {
                if (tmpH < picH) {
                    tmpH += scrollstep;
                    if (tmpH > picH) tmpH = picH;
                    Mar.scrollTop = tmpH;
                    setTimeout(start, scrolltime);
                } else {
                    tmpH = 0;
                    Mar.appendChild(child_div[0]);
                    Mar.scrollTop = 0;
                    setTimeout(start, stoptime);
                }
            }

            setTimeout(start, stoptime);
        }
    </script>

</head>

<body>

<div class="body">
    <input type="checkbox" id="menu">

    <label for="menu" class="menu">
        <!--<span><i class="fa fa-user fa-fw fa-2x"></i></span>-->
        <span><i class="fa fa-angle-left fa-2x" style="color:  #3E3C3B;"></i></span>
    </label>
    <!-- 侧边栏 -->
    <div class="nav">
        <iframe id="ipage" src="/mine/profiles.html" frameborder="0" width="90%"></iframe>
    </div>

    <!--<div class="nav-search">
        <a href="/index.html">
            <span><i class="fa fa-angle-left fa-2x" ></i></span>
        </a>
    </div>-->

    <div class="nav-search">
        <div class="row nav-search">
            <div class="col-12">
            <div class="text col" style=" text-align:center;"><span>积分商城</span></div>
            </div>
        </div>
    </div>
    <hr>
    <div class="container">
        <h6 class="module-title">热门商品</h6>
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
            <div id="goodsCommends">
                <div class="carousel-inner" render-loop="list">
                    <div class="carousel-item">
                        <a role="button" render-attr="data-id=list.id">
                            <img class="d-block w-100" width="100%" height="200px" render-src="list.coverUrl">
                            <span class="recommend" render-html="list.title" align="left"></span>
                            <span class="recommend"  render-fun="inven" render-key="list.inventory" style="float:right; "></span>
                            <p align="left" render-fun="price" render-key="list.price"></p>
                        </a>
                    </div>

                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only"></span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only"></span>
            </a>
        </div>
    </div>
</div>
<hr>
<div class="tab">
    <ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0 tabnav" id="pills-top"
        role="tablist" >
        <!-- .active 和  .show 是点击 -->
        <!--<li class="nav-item">
        <a class="nav-link active show" data-toggle="pill" href="#pills-top">
            <span style="font-weight: bold;">推荐</span>
        </a>
    </li>-->
    </ul>
    <div class="tab-content tabcontent" id="pills-tabContent">
    </div>
</div>

<script type="text/javascript">
    $(".tab").tab({
        type:'click'
    });
</script>
</body>
</html>